<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<html>
<head>
    <meta charset='utf-8'/>
    <title data-i18n="resources.title_taxiRoutesOfCapeTown"></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id='map'></div>

<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript" include="echarts,echarts-gl,shapefile"
        src="../../dist/mapboxgl/include-mapboxgl.js"></script>
<script type="text/javascript">
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
    var data;
    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "| Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
        "<a href='http://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts Echarts-gl</a>";
    var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";

    var myChart = echarts.init(document.getElementById('map'));

    var ENCODE_SCALE = 1e6;

    //解码数据格式
    function decodeLine(line) {
        var result = [];
        var prevX = line[0];
        var prevY = line[1];

        for (var i = 0; i < line[2].length; i += 2) {
            var x = line[2].charCodeAt(i) - 64;
            var y = line[2].charCodeAt(i + 1) - 64;
            // ZigZag decoding
            x = (x >> 1) ^ (-(x & 1));
            y = (y >> 1) ^ (-(y & 1));
            // Delta deocding
            x += prevX;
            y += prevY;

            prevX = x;
            prevY = y;
            // Dequantize
            result.push([x / ENCODE_SCALE, y / ENCODE_SCALE, 10]);
        }
        return result;
    }

    var geoJSON = {
        type: "FeatureCollection",
        features: []
    };
    var regions = [];

    shapefile.open('../data/taxiRoutesOfCapeTown.shp', '../data/taxiRoutesOfCapeTown.dbf')
        .then(source => source.read()
            .then(function append(result) {
                if (result.done) {
                    cbk(geoJSON);
                    return;
                }

                var feature = result.value;
                feature.properties.name = geoJSON.features.length + '';
                regions.push({
                    name: geoJSON.features.length + '',
                    value: 1,
                    height: feature.properties.SHAPE_leng * 10000
                });
                geoJSON.features.push(feature);


                return source.read().then(append);
            })
        );

    function cbk(geoJSON) {
        $.get('../data/taxiRoutesOfCapeTown.json', function (data) {

            var lines = data.map(function (track) {
                return {
                    coords: decodeLine(track)
                };
            });

            //修改v3.8.5 echarts.js文件的BUG
//            echarts.parseGeoJSON = echarts.parseGeoJson;

            echarts.registerMap('buildings', geoJSON);

            myChart.setOption({
                mapbox: {
                    center: [18.424552361777955, -33.92188144682616],
                    zoom: 14,
                    pitch: 50,
                    bearing: -10,
                    altitudeScale: 2,
                    style: {
                        "version": 8,
                        "sources": {
                            "raster-tiles": {
                                "attribution": attribution,
                                "type": "raster",
                                "tiles": [tileURL],
                                "tileSize": 256,
                            },
                        },
                        "layers": [{
                            "id": "simple-tiles",
                            "type": "raster",
                            "source": "raster-tiles",
                            "minzoom": 0,
                            "maxzoom": 22
                        }]
                    },
                    postEffect: {
                        enable: true,
                        screenSpaceAmbientOcclusion: {
                            enable: true,
                            intensity: 1.2,
                            radius: 6,
                            quality: 'low'
                        },
                        screenSpaceReflection: {
                            enable: true
                        }
                    },
                    light: {
                        main: {
                            intensity: 1,
                            shadow: true,
                            shadowQuality: 'high'
                        },
                        ambient: {
                            intensity: 0.
                        },
                        ambientCubemap: {
                            texture: '../data/taxiRoutesOfCapeTown.hdr',
                            exposure: 2,
                            diffuseIntensity: 1,
                            specularIntensity: 2
                        }
                    }
                },

                series: [{
                    type: 'lines3D',
                    coordinateSystem: 'mapbox',
                    effect: {
                        show: true,
                        constantSpeed: 5,
                        trailWidth: 2,
                        trailLength: 0.8,
                        trailOpacity: 1,
                        spotIntensity: 10
                    },

                    blendMode: 'lighter',

                    polyline: true,

                    lineStyle: {
                        width: 0.1,
                        color: 'rgb(200, 40, 0)',
                        opacity: 0.
                    },

                    data: lines
                }, {
                    type: 'map3D',
                    map: 'buildings',
                    coordinateSystem: 'mapbox',
                    shading: 'realistic',
                    silent: true,
                    instancing: true,
                    data: regions,
                    itemStyle: {
                        color: '#444'
                    },
                    realisticMaterial: {
                        metalness: 1,
                        roughness: 0.2,
                    }
                }]
            });
            //获取mapbox对象
            var mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
            mapbox.addControl(new mapboxgl.NavigationControl(), 'top-left');
        });
    }

    window.addEventListener('keydown', function () {
        myChart.dispatchAction({
            type: 'lines3DToggleEffect',
            seriesIndex: 0
        });
    });
</script>
</body>
</html>